<template>
  <view class="mypet">
    <view class="box1" @click="back">
      <uv-icon name="arrow-left" color="#fff"></uv-icon>
      <view class="box11">我的宠物</view>
    </view>
    <view class="mypet-box">
      <view class="mypet-item" v-for="(item,index) in pet" :key="index" @click="goinfor">
        <view class="mypet-item-image">
          <image :src="item.image" mode="scaleToFill" />
        </view>
        <view class="mypet-item-text">{{ item.name }}</view>
        <view class="mypet-item-t">
          <uv-input placeholder="狗狗" border="none">
            <template v-slot:suffix>
              <uv-icon name="edit-pen" size="30"></uv-icon>
            </template>
          </uv-input>
        </view>
      </view>
    </view>
    <view class="mypet-but">
      <uv-button text="新增宠物" shape="circle" color="#008c8c" @click="goaddpet"></uv-button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from "vue";
  const pet = ref([{
      image: 'https://picsum.photos/200?11',
      name: '宠物名称'
    },
    {
      image: 'https://picsum.photos/200?12',
      name: '宠物名称'
    },
    {
      image: 'https://picsum.photos/200?13',
      name: '宠物名称'
    },
    {
      image: 'https://picsum.photos/200?14',
      name: '宠物名称'
    },
  ]);
  const goaddpet = () => {
    uni.navigateTo({
      url: 'pages/tianjiacw/tianjiacw'
    })
  }
  const goinfor = () => {
    uni.navigateTo({
      url: 'pages/chongwuxx/chongwuxx'
    })
  }
  const back = (() => {
    uni.navigateBack({
      delta: 1, // 返回1个，如果是2，返回2个页面
    });
  })
</script>

<style lang="scss">
  @import url("wodechongw.scss");
</style>